'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';

export default function Navbar() {
    const [isSticky, setIsSticky] = useState(false);

    useEffect(() => {
        const handleScroll = () => {
            setIsSticky(window.scrollY > 0);
        };
        window.addEventListener('scroll', handleScroll, { passive: true });
        return () => window.removeEventListener('scroll', handleScroll);
    }, []);

    return (
        <nav
            className={`
        fixed top-0 left-0 w-full z-50
        bg-white text-white shadow
        transition-all duration-300 ease-in-out
        ${isSticky ? 'h-12' : 'h-16'}
      `}
        >
            <div
                className={`
          container mx-auto flex items-center justify-between
          transition-all duration-300 ease-in-out
          ${isSticky ? 'py-2' : 'py-4'}
        `}
            >
                <h1
                    className={`
            font-bold text-black
            transition-all duration-300 ease-in-out
            ${isSticky ? 'text-lg' : 'text-xl'}
          `}
                >
                    Hi-C MultiSpecies DB
                </h1>
                <div className="space-x-4">
                    <Link href="/" className="text-black hover:underline">
                        Home
                    </Link>
                    <Link href="/search" className="text-black hover:underline">
                        Search
                    </Link>
                </div>
            </div>
        </nav>
    );
}
